<template>
  <div class="box">
    <div class="querybox">
      <!-- <el-input v-model="query" placeholder="请输入查询内容" style="width: 200px; right: 10px;" /> -->
      <!-- <el-button type="primary" @click="orgsList">查询</el-button> -->
      <el-button
        type="primary"
        @click="add"
      >新增</el-button>
    </div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="name"
        label="名称"
      />
      <el-table-column
        prop="pcaCodeDesc"
        label="省市区"
      />
      <el-table-column
        prop="address"
        label="详细地址"
      />
      <el-table-column
        prop="contactNumber"
        label="联系电话"
      />
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <div>{{ timeTranslateHMS(scope.row.created) }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="状态"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-text="启用"
            inactive-text="禁用"
            @change="statusChange(scope.row)"
          />
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="viewUser(scope.row.id, scope.index)"
          >查看</el-button>
          <!-- <el-button type="text" size="small" @click="updUser(scope.row, scope.index)">修改</el-button> -->
          <!-- <el-button type="text" size="small" @click="delUser(scope.row, scope.index)">删除</el-button> -->
          <el-button
            type="text"
            size="small"
            @click="addMember(scope.row.id, scope.index)"
          >管理成员</el-button>
          <!-- <el-button type="text" size="small" @click="rmMember(scope.row.id, scope.index)">删除成员</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px;">
      <el-pagination
        :total="total"
        :current-page="filters.pageNum"
        :page-size="filters.pageSize"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </el-row>

    <el-dialog
      :title="editType === 'add' ? '新增' : '查看'"
      :visible.sync="dialogFormVisible"
      :before-close="beforeClose"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :inline="true"
      >
        <el-form-item
          label="机构名称"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="机构联系电话"
          prop="contactNumber"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.contactNumber"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="机构地址"
          prop="pcaCodeDesc"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.pcaCodeDesc"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="机构详细地址"
          prop="address"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.address"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="logo"
          prop="logo"
          :label-width="formLabelWidth"
        >
          <!-- <el-input v-model="form.logo" autocomplete="off" /> -->
          <Upload
            v-model="form.logo"
            style="width: 185px;"
            :img-url="form.logo"
            @on-success="onSuccess"
          />
        </el-form-item>
        <el-form-item
          label="成员配额"
          prop="staffQuota"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.staffQuota"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="到期时间"
          prop="expireTime"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="form.expireTime"
            type="date"
            placeholder="选择日期"
            style="width: 185px;"
          />
        </el-form-item>
      </el-form>
      <!-- <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" prop="username" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话" prop="mobile" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
      </el-form> -->
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button
          type="primary"
          @click="closeDialogForm('form')"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="管理成员"
      :visible.sync="dialogMngMember"
      :before-close="beforeCloseMngMember"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :inline="true"
      >
        <div style="text-align: right;">
          <!-- <el-button type="text" size="small" @click="dialogFormVisibleAddMemberAlert">设置管理员</el-button> -->
        </div>
        <el-table
          ref="singleTable"
          :data="members"
          style="width: 100%"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column
            prop="orgId"
            label="机构ID"
            width="180"
          />
          <el-table-column
            prop="mobile"
            label="电话"
            width="180"
          />
          <el-table-column
            prop="created"
            label="创建时间"
          />
        </el-table>
        <div style="margin-top: 20px">
          <!-- v-if='selectedRow.id' -->
          <el-button
            type="primary"
            size="small"
            :disabled="!selectedRow"
            @click="setCurrent()"
          >取消选择</el-button>
          <Del-tip
            type="primary"
            size="small"
            btn-text="删除成员"
            :disabled="!selectedRow"
          >
            <el-button
              type="primary"
              size="small"
              @click="delCurrent()"
            >确定</el-button>
          </Del-tip>
          <el-button
            type="primary"
            size="small"
            :disabled="!selectedRow"
            @click="setToAdmin()"
          >设置管理员</el-button>
          <el-button
            type="primary"
            size="small"
            @click="dialogFormVisibleAddMemberAlert"
          >增加成员</el-button>
        </div>
      </el-form>

      <el-dialog
        title="增加成员"
        :visible.sync="dialogFormVisibleAddMember"
        :before-close="beforeCloseAddMember"
        append-to-body
      >
        <FilterTable
          :data="filterTableData"
          :query="staff_list"
          :is-show-query-input="true"
          @currentSelected="currentSelected"
        >
          <el-table-column
            prop="headImgUrl"
            label="用户头像"
          >
            <template slot-scope="scope">
              <img
                :src="scope.row.headImgUrl"
                alt=""
                width="80px"
                height="80px"
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="用户名称"
          />
          <el-table-column
            prop="sexDesc"
            label="性别"
          />
          <el-table-column
            prop="mobile"
            label="手机号码"
          />
        </FilterTable>
        <el-row style="margin-top: 10px;">
          <el-pagination
            :total="filterTableQuery.total"
            :current-page="filterTableQuery.pageNum"
            :page-size="filterTableQuery.pageSize"
            layout="total, prev, pager, next, jumper"
            @size-change="filterTableQuerySizeChange"
            @current-change="filterTableQuerySizeChange"
          />
        </el-row>
      </el-dialog>

    </el-dialog>

  </div>
</template>

<script>

import { staff_list } from '@/api/user'
import { orgsList, orgsinfo, orgsedit, bizorg_remove, bizorg_add, bizorg_set_admin } from '@/api/org'
import { timeTranslateHMS } from '@/utils/formatdate'
import Upload from '@/components/Upload'
import FilterTable from '@/components/FilterTable'
export default {
  name: 'Documentation',
  components: {
    Upload,
    FilterTable
  },
  data() {
    return {
      timeTranslateHMS,
      filters: {
        mobile: '',
        username: '',
        pageNum: 1,
        pageSize: 10
      },
      form: {
        name: '',
        contactNumber: '',
        pcaCodeDesc: '',
        address: '',
        logo: '',
        expireTime: '',
        mobile: '',
        sex: '',
        staffQuota: ''
      },
      filterTableQuery: {
        mobile: '',
        username: '',
        searchBy: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        contactNumber: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        pcaCodeDesc: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        expireTime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      tableData: [],
      filterTableData: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogFormVisibleAddMember: false, // 增加成员的模态框
      dialogMngMember: false,
      query: '',
      editType: null,
      members: [],
      selectedRow: ''
    }
  },
  mounted() {
    this.orgsList()
  },
  methods: {
    currentSelected(val) {
      this.bizorg_add(val)
    },
    bizorg_add(staffId) {
      const orgId = this.form.id
      const sourceAppId = this.form.sourceAppId
      bizorg_add({ orgId, staffId, platform: 4, sourceAppId }).then((res) => {
      })
    },
    // 用户列表
    // staff_list(searchBy) {
    //   // this.filters.searchBy = searchBy
    //   staff_list({ searchBy }).then(res => {
    //     const result = res.data
    //     this.filterTableData = result.content
    //     // this.total = result.totalPage
    //   }).catch(err => {
    //     console.log(err)
    //   })
    // },
    // 标签列表
    staff_list(num, searchBy = '') {
      // const pageNum = this.filters.pageNum - 1
      if (num === 1) this.filterTableQuery.pageNum = 1 // 查询时，分页器数字重置为1
      const pageNum = (num || this.filterTableQuery.pageNum) - 1
      staff_list({ ...this.filterTableQuery, pageNum, searchBy }).then(res => {
        const result = res.data
        this.filterTableData = result.content
        this.filterTableQuery.total = result.totalElements
      }).catch(err => {
        console.log(err)
      })
    },
    dialogFormVisibleAddMemberAlert() {
      this.dialogFormVisibleAddMember = true
      this.staff_list()
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange(val) {
      this.selectedRow = val
    },
    delCurrent() {
      const data = this.selectedRow
      const staffId = data.id
      const orgId = data.orgId
      bizorg_remove({ staffId, orgId }).then((res) => {
      })
    },
    setToAdmin() {
      const data = this.selectedRow
      const staffId = data.id
      const orgId = data.orgId
      bizorg_set_admin({ staffId, orgId }).then((res) => {
      })
    },
    // dialog关闭事件
    beforeClose() {
      this.resetForm('form')
    },
    beforeCloseAddMember() {
      this.filterTableQuery.pageNum = 1
      this.filterTableQuery.searchBy = ''
      this.dialogFormVisibleAddMember = false
    },
    beforeCloseMngMember() {
      this.dialogMngMember = false
    },
    // logo上传成功监听
    onSuccess(res) {
      this.form.logo = res
    },
    // 新增操作
    add() {
      this.editType = 'add'
      this.dialogFormVisible = true
    },
    // 增加成员
    addMember(id) {
      // this.editType = 'addMember'
      this.dialogMngMember = true
      this.orgsinfo(id)
    },
    rmMember() {
      this.editType = 'rmMember'
      this.dialogFormVisible = true
    },
    // 分页切换监听
    handleSizeChange(pageNum) {
      this.filters.pageNum = pageNum
      this.orgsList()
    },
    filterTableQuerySizeChange(pageNum) {
      this.filterTableQuery.pageNum = pageNum
      this.staff_list()
    },
    // 用户列表
    orgsList() {
      const pageNum = this.filters.pageNum - 1
      orgsList({ ...this.filters, pageNum }).then(res => {
        const result = res.data
        this.tableData = result.content
        this.total = result.totalElements
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除用户
    delUser(row, index) {
      this.editType = 'delete'
      this.tableData.splice(row, 1)
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
    },
    // 修改用户
    updUser(row, index) {
      this.editType = 'update'
      this.dialogFormVisible = true
    },
    // 查看用户
    viewUser(id) {
      this.editType = 'view'
      this.dialogFormVisible = true
      this.orgsinfo(id, 'view')
    },
    // 用户详情
    orgsinfo(id, type) {
      orgsinfo({ orgId: id }).then(res => {
        // res.data.org.logo = 'https://dss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/bd315c6034a85edf3d432b7d44540923dc5475a5.jpg'
        // if (type === 'view') {
        // }
        this.form = res.data.org
        this.members = res.data.members
        // let result = res.data;
        // this.tableData = result.users;
      }).catch(err => {
        console.log(err)
      })
    },
    // 弹窗关闭触发函数
    closeDialogForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.orgsedit(formName)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 机构编辑
    orgsedit(formName) {
      const form = this.form
      // form.created = '2020-10-07'
      form.expireTime = '2021/10/07'
      orgsedit(form).then((res) => {
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.resetForm(formName)
        this.orgsList()
        // this.dialogFormVisible = false
      })
    },
    statusChange(row) {
      // {id: row.id, status: row.status}
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px 30px;
  .form {
    margin-top: 50px;
  }
  .querybox {
    text-align: right;
    margin-bottom: 20px;
  }
}
.box-card {
  margin-bottom: 15px;
}
</style>
